<template>
  <div class="container">
    <div class="title">
      <img class="title-img" src="../../../assets/imgs/head3.png" />
      <div class="title-txt">
        <div class="span1"></div>
        <div class="span2">报警类型统计</div>
      </div>
    </div>
    <div class="content-container">
      <div class="left-panel">
        <div class="search-form">
          <el-form
            :inline="true"
            :model="searchForm"
            size="mini"
            style="width: 100%"
          >
            <el-form-item label="日期:" class="label-color">
              <el-date-picker
                v-model="searchForm.startDate"
                size="mini"
                style="width: 128px"
                type="date"
                placeholder="开始日期"
              />
              <span
                style="
                  margin-left: 10px;
                  color: #fff;
                  font-weight: bold;
                  margin-right: 10px;
                "
                >--</span
              >
              <el-date-picker
                v-model="searchForm.endDate"
                size="mini"
                style="width: 128px"
                type="date"
                placeholder="结束日期"
              />
            </el-form-item>

            <el-form-item label="活动区域">
              <el-select v-model="searchForm.region" placeholder="活动区域">
                <el-option label="区域一" value="shanghai" />
                <el-option label="区域二" value="beijing" />
              </el-select>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="list-box">
          <el-collapse v-model="activeNames" @change="handleChange">
            <el-collapse-item title="流程——1" name="1">
              <div class="list-item">
                与现实生活一致：惯的语言和概念；
              </div>
              <div class="list-item">
                与现实生活一致：；
              </div>
            </el-collapse-item>
            <el-collapse-item title="流程——2" name="2">
              <div class="list-item">
                与现实生活一致：与现概念；
              </div>
            </el-collapse-item>
            <el-collapse-item title="流程——3" name="3">
              <div class="list-item">
                与现实生活一致：与和概念；
              </div>
              <div class="list-item">
                与现实生活一致：与现实概念；
              </div>
            </el-collapse-item>
            <el-collapse-item title="流程——4" name="4">
              <div class="list-item">
                与现实生活一致：与现实和概念；
              </div>
            </el-collapse-item></el-collapse
          >
        </div>
      </div>
      <div class="right-panel">
        <div class="chart-box">
          <div id="type-chart" class="type-chart"></div>
          <div class="panel-footer"></div>
        </div>
        <!-- <div class="table"></div> -->
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  mounted() {
    this.initChart();
  },
  data() {
    return {
      searchForm: {},
      optionType: {
        color: ["#75f9fd", "#e5323e"],
        title: {
          text: "各类报警统计",
          textStyle: {
            color: "#fff",
            fontSize: 20,
          },
        },
        grid: {
          right: "10%",
          left: "13%",
          bottom: "15%",
          top: "13%",
        },
        toolbox: {
          right: "5%",
          feature: {
            saveAsImage: {
              backgroundColor: "#0b1539",
              excludeComponents: ["dataZoom", "toolbox"],
            },
          },
          iconStyle: { borderColor: "#fff" },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
          },
        },
        legend: {
          show: true,
          textStyle: { color: "#fff" },
          left: "right",
          bottom: "50%",
          orient: "vertical",
        },
        dataZoom: {
          type: "slider",
          show: true,
          startValue: 0,
          endValue: 7,
          xAxisIndex: [0],
        },
        xAxis: {
          axisLabel: {
            color: "#fff",
          },
          data: [
            "07/16",
            "07/17",
            "07/18",
            "07/19",
            "07/20",
            "07/21",
            "07/22",
            "07/23",
          ],
        },
        yAxis: {
          axisLabel: {
            color: "#fff",
          },
        },
        series: [
          {
            name: "重复报警",
            type: "line",
            data: [5400, 5300, 5200, 5412, 5628, 5520, 4213, 4712],
          },
          {
            name: "瞬闪报警",
            type: "line",
            data: [5555, 5520, 5536, 5510, 5510, 5520, 1203, 5621],
          },
          {
            name: "骚扰报警",
            type: "line",
            data: [5555, 5520, 5536, 5510, 5510, 5520, 5103, 5621],
          },
          {
            name: "间歇报警",
            type: "line",
            data: [5555, 5552, 5536, 5510, 5510, 5550, 5103, 5321],
          },
          {
            name: "陈旧报警",
            type: "line",
            data: [5555, 5201, 53067, 5510, 510, 5520, 5203, 3621],
          },
        ],
      },
    };
  },
  methods: {
    initChart() {
      var chartDom1 = document.getElementById("type-chart");
      var typeChart = echarts.init(chartDom1);
      typeChart.setOption(this.optionType, true);
      window.addEventListener("resize", function () {
        typeChart.resize();
      });
    },
  },
};
</script>

<style scoped lang="scss">
.container {
  height: 100vh;
  width: 100%;
  background-color: #0a1b36;
}
.title {
  width: 100%;
  height: 60px;
  // line-height: 60px;
  position: relative;
  .title-img {
    width: 100%;
    height: 100%;
  }
  .title-txt {
    position: absolute;
    top: 15px;
    left: 10px;
    display: flex;
    .span1 {
      height: 30px;
      width: 30px;
      border-radius: 15px;
      background-color: #42c7f7;
      border: 1px solid #8be0ff;
      margin-right: 5px;
    }
    .span2 {
      height: 30px;
      font-size: 30px;
      font-weight: bold;
      color: #fff;
      line-height: 30px;
    }
  }
}
.content-container {
  height: calc(100% - 80px);
  width: 100%;
  // background-color: #42c7f7;
  margin-top: 20px;
  padding: 10px 10px;
  display: flex;
  justify-content: space-between;
  .left-panel {
    width: 30%;
    height: 100%;
    //  background-color: green;
    .search-form {
      padding: 10px 10px;
      width: 100%;
    }
    .list-box {
      width: 100%;
      .list-item {
        height: 40px;
     //   background-color: #42c7f7;
        border-top: 1px solid #efefef;
        border-left: 1px solid #efefef;
        border-right: 1px solid #efefef;
        color: #fff;
        line-height: 40px;
        padding-left: 10px;
      }
    }
  }
  .right-panel {
    height: 100%;
    width: 67%;
    //  background-color: #fff;
    .chart-box {
      width: 100%;
      height: 100%;
      //  background-color: #42c7f7;
      position: relative;
      .type-chart {
        height: 100%;
        width: 100%;
        padding: 10px 10px;
      }
      &::before {
        position: absolute;
        top: 0;
        left: 0;
        width: 30px;
        height: 30px;
        border-left: 3px solid #02a6b5;
        border-top: 3px solid #02a6b5;
        content: "";
      }
      &::after {
        position: absolute;
        top: 0;
        right: 0;
        width: 30px;
        height: 30px;
        border-right: 3px solid #02a6b5;
        border-top: 3px solid #02a6b5;
        content: "";
      }
      .panel-footer {
        width: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
        &::before {
          position: absolute;
          bottom: 0;
          left: 0;
          width: 30px;
          height: 30px;
          border-left: 3px solid #02a6b5;
          border-bottom: 3px solid #02a6b5;
          content: "";
        }
        &::after {
          position: absolute;
          bottom: 0;
          right: 0;
          width: 30px;
          height: 30px;
          border-right: 3px solid #02a6b5;
          border-bottom: 3px solid #02a6b5;
          content: "";
        }
      }
    }
    .table {
      width: 100%;
      height: 35%;
      background-color: #2c4370;
    }
  }
}
::v-deep .el-form-item__label {
  color: #6da7f0;
}
::v-deep .el-input__inner {
  background-color: transparent !important;
  border: 1px solid #75f9fd;
}
::v-deep .el-collapse-item__header {
  padding-left: 10px;
  background-color: #2c4370;
  color: #fff;
  font-weight: bolder;
  font-size: 16px;
  border-left: 1px solid #efefef;
  border-right: 1px solid #efefef;
}
::v-deep .el-collapse-item__wrap {
  background-color: transparent !important;
}
::v-deep .el-collapse-item__content {
  padding-bottom: 0;
}
</style>